<template>
  <div class="enterprise-manage">
 <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">公司名称</div>
      <el-menu mode="horizontal" :default-active="activeMenu" >
        <el-menu-item index="1" >集团管理</el-menu-item>
        <el-menu-item index="2" >企业管理</el-menu-item>
        <el-menu-item index="3" >平台运营</el-menu-item>
        <el-menu-item index="4" >系统设置</el-menu-item>
      </el-menu>
      <div class="header-right">
        <el-input placeholder="搜索" size="small" style="width: 150px; margin-right: 10px;" />
        <span>姓名</span>
        <span style="margin-left: 20px;">应用市场</span>
        <span style="margin-left: 20px;">客户端</span>
      </div>
    </el-header>



    <el-container>
      <!-- 侧边栏 -->
    <el-aside width="200px" class="aside">
  <el-menu :default-active="activeMenu" router>
    <el-sub-menu index="1">
      <template #title>溯源管理</template>
      <el-menu-item index="/traceability" :to="{ path: '/traceability' }">溯源管理</el-menu-item>
      <el-menu-item index="/traceDetail" :to="{ path:'/traceDetail'}">溯源管理养殖信息</el-menu-item>
       <el-menu-item index="/slaughter-detail" :to="{ path:'/slaughter-detail'}">溯源管理屠宰信息</el-menu-item>
        <el-menu-item index="/deep" :to="{ path:'/deep'}">溯源管理深加工信息</el-menu-item>
    </el-sub-menu>
  </el-menu>
</el-aside>

      <!-- 主体内容 -->
      <el-main>
        <RouterView />
      </el-main>
    </el-container>

    </div>
</template>

<script setup lang="ts">
const activeMenu = '2'
</script>

<style scoped>
.enterprise-manage {
  height: 100vh;
  background: #f5f6fa;
}
.header {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg,rgb(123, 129, 156) 60%, #eaf1fb 100%);
  color: #222;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
  box-shadow: 0 2px 8px rgba(64,158,255,0.06);
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
  padding: 4px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.06);
  margin-right: 40px;
}
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-right .el-button {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.06);
  transition: background 0.2s;
}
.header-right .el-button:hover {
  background: #eaf1fb;
}
.header-right .el-avatar {
  margin-left: 8px;
  border: 2px solid #409eff;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
}
.aside {
  background: #fff;
  min-height: calc(100vh - 60px);
  border-right: 1px solid #ebeef5;
  box-shadow: 2px 0 8px rgba(64,158,255,0.04);
}
.el-menu {
  background: transparent;
  font-size: 15px;
  border-right: none;
}
.el-menu-item {
  border-radius: 8px;
  margin: 2px 0;
  transition: background 0.2s, color 0.2s;
}
.el-menu-item:hover {
  background: #eaf1fb !important;
  color: #409eff !important;
}
.el-menu-item.is-active {
  background: linear-gradient(90deg, #409eff 0%, #1d8cf8 100%) !important;
  color: #fff !important;
}
.tab-header {
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.04);
}
.el-tabs {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #f5f6fa;
  margin-bottom: 0;
}
.el-tabs__item {
  border-radius: 12px 12px 0 0;
  margin-right: 4px;
  font-weight: bold;
  color: #222;
  background: #f5f6fa;
  transition: background 0.2s, color 0.2s;
}
.el-tabs__item.is-active {
  background: linear-gradient(90deg, #409eff 0%, #1d8cf8 100%);
  color: #fff;
}
.el-tabs__item .el-icon {
  color: #409eff;
}
.el-tabs__item .el-icon:hover {
  color: #f56c6c;
}
.main-content {
  background: #fff;
  min-height: 600px;
  padding: 32px 24px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 16px rgba(64,158,255,0.06);
  margin: 16px 16px 16px 0;
}
.el-button, .el-input, .el-select, .el-tabs__item, .el-avatar {
  border-radius: 8px !important;
}
.el-button {
  font-weight: 500;
  transition: box-shadow 0.2s, background 0.2s;
}
.el-button:hover {
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
}
.el-input__inner, .el-select .el-input__inner {
  border-radius: 8px !important;
  background: #f5f6fa;
  border: 1px solid #ebeef5;
  transition: border 0.2s;
}
.el-input__inner:focus, .el-select .el-input__inner:focus {
  border: 1.5px solid #409eff;
  background: #fff;
}
</style>